<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 头部区域 -->
      <header class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 rounded-2xl text-white mb-8 shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent" />
        <div class="relative px-8 py-12">
          <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
            <div class="space-y-4">
              <h1 class="text-5xl font-bold tracking-tight bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                技术论坛
              </h1>
              <p class="text-xl opacity-90 max-w-2xl leading-relaxed">
                分享技术经验，交流学习心得，与同行一起成长
              </p>
              <div class="flex items-center gap-4 text-sm opacity-75">
                <span class="flex items-center gap-1">
                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                  优质内容
                </span>
                <span class="flex items-center gap-1">
                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75S7 14 17 8z"/>
                  </svg>
                  活跃社区
                </span>
              </div>
            </div>
            <button 
              class="group flex items-center gap-3 px-8 py-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl text-white font-semibold hover:bg-white/20 hover:border-white/30 hover:-translate-y-1 transition-all duration-300 shadow-lg"
              @click="navigateToNewPost"
            >
              <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
              发布新帖
            </button>
          </div>
        </div>
      </header>

      <!-- 搜索和筛选区域 -->
      <div class="flex flex-col sm:flex-row gap-4 mb-8 p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50">
        <div class="relative flex-1">
          <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
          <input 
            v-model="searchQuery"
            type="text" 
            placeholder="搜索帖子、作者或内容..."
            class="w-full pl-12 pr-4 py-4 border border-gray-200 rounded-xl text-base bg-white/50 backdrop-blur-sm transition-all duration-300 focus:outline-none focus:border-indigo-500 focus:bg-white focus:shadow-lg placeholder-gray-400"
            @input="handleSearch"
          >
        </div>
        <div class="flex gap-3">
          <button 
            class="px-6 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-xl font-semibold hover:from-indigo-600 hover:to-purple-600 transition-all duration-300 shadow-lg hover:shadow-xl"
            @click="loadPosts"
          >
            <svg class="w-5 h-5 inline mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            刷新
          </button>
        </div>
      </div>

      <!-- 帖子列表 -->
      <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 overflow-hidden">
        <ForumLoadingState v-if="loading" message="正在加载精彩内容..." />
        
        <ForumEmptyState
          v-else-if="posts.length === 0"
          title="暂无帖子"
          description="成为第一个发布帖子的人吧！分享你的技术见解和经验。"
          action-text="发布新帖"
          @action="navigateToNewPost"
        />

        <div v-else class="divide-y divide-gray-100/50">
          <ForumPostCard
            v-for="post in posts" 
            :key="post.id"
            :post="post"
          />
        </div>
      </div>

      <!-- 分页 -->
      <div class="mt-8">
        <ForumPagination
          :current-page="currentPage"
          :total-pages="totalPages"
          @change-page="goToPage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Post } from '~/types/post'
import { postApi } from '~/utils/api'

// 添加认证中间件
definePageMeta({
  middleware: 'auth'
})

// 响应式数据
const posts = ref<Post[]>([])
const loading = ref(false)
const searchQuery = ref('')
const sortBy = ref('latest')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchTimeout = ref<NodeJS.Timeout>()

// 计算属性
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))


// 方法
const loadPosts = async () => {
  try {
    loading.value = true
    
    const params: {
      page: number;
      pageSize: number;
      sort: string;
      search?: string;
    } = {
      page: currentPage.value,
      pageSize: pageSize.value,
      sort: sortBy.value
    }
    
    if (searchQuery.value) {
      params.search = searchQuery.value
    }

    const response = await postApi.getPostsApi(params)
    
    if (response.success) {
      posts.value = response.data.posts
      total.value = response.data.total
    }
  } catch (error) {
    console.error('加载帖子失败:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value)
  }
  
  searchTimeout.value = setTimeout(() => {
    currentPage.value = 1
    loadPosts()
  }, 500)
}

const goToPage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
    loadPosts()
  }
}


const navigateToNewPost = () => {
  navigateTo('/StudyArea/Forum/New')
}

// 生命周期
onMounted(() => {
  loadPosts()
})

onUnmounted(() => {
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value)
  }
})
</script>
